<template>
    <div>
        <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="top1">
            <p class="top2">头像</p>
            <p class="top3">
                <van-image round width="3rem" height="3rem" :src="userdataimg" />
                <van-icon name="arrow" />
            </p>
        </div>
        <hr>
        <div class="top1">
            <p class="top2">昵称</p>
            <p class="top3">
                <span>{{ userdataname }}</span>
                <van-icon name="arrow" />
            </p>
        </div>
        <hr>
        <div class="top1">
            <p class="top2">性别</p>
            <p class="top3">
                <!-- <select name="" id="xiala">
                    <option value="">1</option>
                    <option value="">2</option>
                </select> -->
                <van-field v-model="result1" placeholder="点击选择性别" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirmm" @cancel="showPicker = false" />
                </van-popup>
                <van-icon name="arrow" />
            </p>
        </div>
        <hr>
        <div class="top1">
            <p class="top2">地址</p>
            <p class="top3"> <!-- <van-field v-model="number" type="number" label="数字" /> -->
                <van-field v-model="result" readonly name="area" placeholder="点击选择省市区" @click="showArea = true" />
                <van-popup v-model:show="showArea" position="bottom">
                    <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                </van-popup>
                <van-icon name="arrow" />
            </p>

        </div>
        <hr>
        <div class="top1">
            <p class="top2">详细地址</p>
            <p class="top3">
                <van-icon name="arrow" />
            </p>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { userapi } from '@/api/http';
import router from '@/router';
import { ref, onMounted } from 'vue';
import { areaList } from '@vant/area-data';

const userdataname = ref()
const userdataimg = ref()
const onClickLeft = () => history.back();

// const onCancel = () => { show1.value = false };
onMounted(() => {
    userapi({ user_code: localStorage.getItem('user_code') }).then((res: any) => {
        console.log('我的信息', res);
        userdataname.value = res.user_data.user_title
        userdataimg.value = res.user_data.user_img
    })
})

// 性别
const result1: any = ref('');
const showPicker = ref(false);
// const columns: any = ['男', '女'];
const columns = [
    { text: '男', },
    { text: '女' },

];

const onConfirmm = (value: any) => {
    result.value = value;
    showPicker.value = false;
};


// 地区选择器
const result: any = ref('');
const showArea = ref(false);
const onConfirm = (areaValues: any[]) => {
    showArea.value = false;
    result.value = areaValues
        .filter((item: any) => !!item)
        .map((item: any) => item.name)
        .join('/');
};
</script>
<style lang="scss">
#app {
    // margin: 0;
    padding: 0;

    .top1 :first-child {
        margin-bottom: 1rem;
    }

    .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;


        .top2 {
            padding-top: 1rem;
            margin-left: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .van-field {
            width: 8.1rem;
            height: 2rem;
        }

        .top3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 1rem;

            span {
                padding-top: 1rem;
            }

            #xiala {
                margin-top: 1rem;
                border: none;
                // margin-right: 2rem;
                width: 4rem;
                height: 1rem;
            }
        }
    }
}
</style>